<template>
	<view class="user">
		<view class="header">
			<view class="title">
				<view class="head">
					<image :src="userInfo.head ? (userInfo.head == 'default.png' ? '/static/mescroll/xiaojiejie.jpg' : userInfo.head) : '/static/mescroll/xiaojiejie.jpg' " mode=""  @click="previewImage"></image>
				</view>
				<view class="head-title">
					<text v-if="hasLogin">对影成三人DDp</text>
					<text v-if="!hasLogin" @click="toUrl('/pages/public/login')">请先登录</text>
					<text>暂无个性签名</text>
				</view>
			</view>
			<view class="vip">
				点击开通会员 
			</view>
		</view>
		<view class="line"></view>
		<view @tap="ListTap">
			<view class="list" v-for="(item,i) in 6" :key="i" hover-class="active" :data-idx="i">
				<image src="../../static/img/huion.png" mode=""></image>
				<text>会员中心</text>
				<image src="../../static/user/jinru.png" mode="" class="jinru"></image>
			</view>
		</view>	
		
		<view class="set" @click="toUrl('/pages/set/set')">
			<image src="../../static/user/set.png" mode=""></image>
		</view>
		<!-- <tabbar :list="vuex_tabbar" active-color="#976bf8" inactive-color="#C0C4CC"></tabbar> -->
		<tip></tip>
	</view>
</template>
<script>
	import { mapState, mapMutations} from 'vuex'
	export default{
		computed:{
			...mapState(['hasLogin','userInfo','vuex_tabbar'])
		},
		mounted() {
		},
		methods:{
			ListTap(ev){//前端性能优化
				console.log(ev)
				let idx = ev.target.dataset.idx
				this.$tip(idx+1)
			},
			toUrl(e){
				uni.navigateTo({
					url:e
				})
			},
			// 截图预览
			previewImage(e) {
				let arr = Array(this.userInfo.head)
				uni.previewImage({
					current: 0,
					urls: arr
				})
			},
		}
	}
</script>
<style>
	page{
		/* background: #F5F5F5; */
		font-size: 30rpx;
	}
	.header{
		height: 270rpx;
		width: 100%;
		background-image: linear-gradient(to right, #d349de,#d2359c);
		/* background: url(https://cdn.sdzuhaoxia.com/slideshow/bg-blue.png) no-repeat; */
		/* background-size: cover; */
		padding-top: 140rpx;
	}
	.title{
		display: flex;
		height: 120rpx;
		align-items: center;
		padding:  0 40rpx;
	}
	.head{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.head image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.head-title{
		color: #FFFFFF;
		font-size: 36rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: 100%;
	}
	.head-title text:first-child{
		font-weight: bold;
	}
	.head-title text:last-child{
		font-size: 30rpx;
	}
	.active{
		background: #F5F5F5;
	}
	.set{
		position: absolute;
		right: 30rpx;
		top: 32px;
		width: 54rpx;
		height: 54rpx;
	}
	.set image{
		width: 100%;
		height: 100%;
	}
	.vip{
		height: 70rpx;
		width: 400rpx;
		margin: auto;
		margin-top: 40rpx;
		font-weight: bold;
		border-radius: 60rpx;
		background-image: linear-gradient(to right, #d349de,#d2359c);
		border: 1rpx #ffffff solid;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}
	.line{
		height: 14rpx;
		width: 100%;
		background: #EEEEEE;
	}
	.list{
		padding: 0 40rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		border-top: 1px solid #f5f5f5;
		border-bottom: 1px solid #f5f5f5;
	}
	.list image{
		height:50rpx;
		width:50rpx;
	}
	.jinru{
		height:40rpx;
		width:40rpx;
		display: flex;
		margin-left: auto;
	}
	.list text{
		margin-left: 20rpx;
	}
</style>